<template>
  <view class="page-content">
    <!--填图模式-->
    <scroll-view class="main_box" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
     <!--用户信息-->
      <view class="page-top">
        <view class="page-top-box">
          <view class="page-top-box-bg"></view>
          <view class="box-l">
            <view class="box-top">
              <image class="box-head" :src="userInfos.img"></image>
              <view class="box-con">
                <view class="box-name">{{userInfos.nickname}}</view>
                <view class="box-pho"><text class="box-txt">绑定手机：</text>{{userInfos.bind_mobile}}</view>
              </view>
            </view>
          </view>
          <view class="box-r" v-if="userInfos.bind_status===1" @click="jieb">解绑</view>
          <view class="box-r" v-else>绑定手机</view>
        </view>
      </view>
      <!--列表-->
      <template v-if="datalist && datalist.length > 0">
        <view class="list-ul">
          <block  v-for="(item,ind) in datalist" :key="ind">
            <view class="list-li" @tap="toDetail(item.id)">
              <view class="list-li-box-left">
                <view class="list-li-tit">{{item.activity_name}}</view>
                <view class="list-li-time">{{item.activity_start}}~{{item.activity_end}}</view>
              </view>
              <view class="list-li-box-right" v-if="item.status===1">
                <view class="list-li-num">缺 {{item.count}}</view>
                <view class="list-li-icon iconfont iconfanhui"></view>
              </view>
            </view>
          </block>
          <!-- 上拉加载 -->
          <view class="det-con-more">
            <load-more :loadmore="load_more"></load-more>
          </view>
        </view>
      </template>
      <empty class="empty" v-else no-full type="noData"></empty>
    </scroll-view>
  </view>
</template>

<script>
import { getwechatactivitylists } from '@/api/index'
import { getwechatopenidinfos,removebinds } from '@/api/login'
import loadMore from '@/components/uni-load-more/load-more.vue'
import wTit from "@/components/w-tit/w-tit.vue"
import { mapGetters, mapActions } from 'vuex'
import  store  from '@/store'
export default {
  components: {
    loadMore,wTit
  },
  data() {
    return{
      scrollTop: 0,
      userInfos: {
        img:'/static/img/headimg.png',
        mobie:'',
        name:'',
        state:'',
      },

      datalist:[],
      is_img:'/static/tabBar-exam/is_img.jpg',
      formdata:{
        page:1,
        limit:10,
        date:'',
        status:'1',
        openid:''
      },
      noData:false,
      load_more: '', //下拉加载文字
      course_id:'', //传值id
      is_show:false,
    }
  },
  computed: {
    ...mapGetters(['userInfo','code','openid'])
  },
  onShow(option){
    console.log(4444,option)
  },
  onLoad(option) {
    //console.log(this.getQueryVariable('openid_en'));
    //微信公众号跳转页面
    console.log(666,option)
    console.log(777,this.userInfo)
    let get = sessionStorage.getItem("openid_code_"+option.openid_en);
    if((get == undefined || get == '') && option.openid_en){
        console.log(10001)
        const code = option.openid_en;
        console.log(code)
        store.state.code = code;
        this.setCode(code)
        this.getuserinfo(code);
    }else {
      console.log(4)
      //接口-获取列表信息
    }
    if(this.userInfo){
      console.log(5)
      this.userInfos = this.userInfo;
      this.getListData();
    }
  },

  methods: {
    ...mapActions('user',['setUserInfo','setCode','setOpenid']),
    jieb(){
      removebinds({
        openid:this.userInfo.openid,
        mobile_id:this.userInfo.bind_mobile_id,
      }).then(res=>{
        console.log(678,res)
        if(res.code===1){
          uni.showToast({
            title: res.msg,
            duration: 2000,
            icon: "none"
          });
          window.location.href = res.data.authorization_url;
        }else{
          uni.showToast({
            title: res.msg,
            duration: 2000,
            icon: "none"
          });
        }
      })
    },
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
      }
      return(false);
    },
    // 跳转详细页
    toDetail(id){
      uni.navigateTo({url: '/pages/costList/table_detail?id=' + id });
    },
    //获取用户信息
    getuserinfo(code){
      console.log(code,33)
      getwechatopenidinfos({code:code}).then(res=>{
        sessionStorage.setItem("openid_code_"+code,1);
        if(res.code === 1){
          console.log(3,res)
          //缓存用户信息
          this.setUserInfo(res.data)
          //缓存用户openid
          this.setOpenid(res.data.openid)
          this.userInfos = res.data;
          //接口-获取列表信息
          this.getListData();
          //用户未绑定手机跳转绑定页面
          if(res.data.bind_status === 2){
            uni.navigateTo({url: '/pages/login/index'});
          }
        }
      })
    },
    //下拉加载
    loadmore(){
      console.log('下拉加载');
      let _self = this;
      _self.formdata.page++;
      this.getListData();
    },
    // 获取列表数据
    getListData(){
      console.log(2,this.userInfos.openid)
      if(this.userInfos.openid!=undefined){
        this.formdata.openid = this.userInfos.openid;
      }else if(this.userInfo.openid){
        this.formdata.openid = this.userInfo.openid;
      }
      getwechatactivitylists(this.formdata).then(res=>{
        if(res.code===1){
          let resData = res.data.data;
          if(resData && resData.length>0){
            resData.forEach(item =>{
              item.activity_end = item.activity_end.replace(/-/g,'.');
              item.activity_start = item.activity_start.replace(/-/g,'.');
            })
          }
          console.log(1,resData)
          if(this.formdata.page>1){
            if (resData && resData.length < 10) {
              this.load_more = '没有更多了'
              this.datalist = this.datalist.concat(resData)
            } else {
              this.load_more = '加载中...',
                  this.datalist = this.datalist.concat(resData);
            }
          }else {
            if (resData && resData.length < 10) {
              this.load_more = '没有更多了'
              this.datalist = resData
            } else {
              this.load_more = '加载中...',
                  this.datalist = resData
            }
          }
          console.log(444,this.datalist)
        }
      })
    },
    //#ifdef H5
    clickl(){
      uni.navigateTo({url: "/pages/examSystem/charting/courseList"});
    }
    //#endif
  }
}
</script>

<style lang="scss">
.empty{
  height: calc(100% - 300rpx)!important;
}
.page-top{
  display: flex;
  flex-direction: column;
  margin: 0 30rpx;
  height: 300rpx;

  .page-top-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30rpx 0;
    height: 240rpx;
    border-radius: 20rpx;
    background: linear-gradient(360deg, #4566FF 0%, #5C79FF 100%);
    box-shadow: 0rpx 14rpx 26rpx rgba(69, 102, 255, 0.44);
    padding: 30rpx;
    position: relative;
    overflow: hidden;
    .page-top-box-bg{
      position: absolute;
      width: 280rpx;
      height:280rpx;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      top:-190rpx;
      right:30rpx;
    }
    .box-l{
      display: flex;
      flex-direction: column;
      .box-top{
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
        .box-head{
          width: 108rpx;
          height: 108rpx;
          background: #EFEFEF;
          margin-right: 20rpx;
          border-radius: 54rpx;
          background-image: url('/static/img/headimg.png');
        }

      }
      .box-con{
        display: flex;
        flex-direction: column;
        .box-name{
          font-size: 36rpx;
          font-weight: 400;
          line-height: 60rpx;
          color: #FFFFFF;
        }
        .box-pho{
          font-size: 24rpx;
          font-weight: 400;
          line-height: 40rpx;
          color: #FFFFFF;
        }
      }
    }
    .box-r{
      height: 54rpx;
      line-height: 54rpx;
      padding: 0 30rpx;
      color: #fff;
      font-size: 24rpx;
      border: 1px solid #FFFFFF;
      border-radius: 8rpx;
    }
  }
}
.page-content,.main_box{
  height:100vh;
  background: #f5f5f5;
}
.list-ul{
  display: flex;
  flex-direction: column;
  height: calc(100% - 300rpx);
  margin:0 30rpx;
  .det-con-more {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10rpx;
    color: #999;
    font-size: 26rpx;
  }
  .list-li{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 36rpx 30rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 10rpx;
    margin-bottom: 30rpx;
    .list-li-box-left{
      display: flex;
      flex-direction: column;
      width: calc(100% - 140rpx);
      margin-right: 20rpx;
      .list-li-tit{
        width: 100%;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 60rpx;
        color: #2B2B2B;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .list-li-time{
        font-size: 24rpx;
        font-weight: 400;
        line-height: 30rpx;
        color: #999999
      }
    }
    .list-li-box-right{
      display: flex;
      justify-content: space-between;
      width: 120rpx;
      .list-li-num{
        font-size: 32rpx;
        font-weight: 400;
        color: #FF4545;
      }
      .list-li-icon{
        font-size: 40rpx;
        color: #ccc;
      }
    }
  }
}
</style>
